<template>
  <div id="app">
		<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
			<!-- Brand/logo -->
			<a class="navbar-brand">Logo</a>
			<!-- Links -->
			<ul class="navbar-nav">
				<li class="nav-item" v-for="(item,index) in headers">
					<a class="nav-link" :class='{active:index==qwerqwre}' @click="goRouter(item.route,index)" >{{ item.text }}</a>
				</li>
			</ul>
		</nav>
		<router-view></router-view>
		<foot></foot>
  </div>
</template>

<script>
	import foot from './foot.vue'
  export default {
    name: 'App',
    data() {
      return {
				headers: [
					{
						text: '首页',
						route: '/index'
					},
					{
						text: '新闻',
						route: '/news'
					},
					{
						text: '分类',
						route: '/classify'
					},
				],
				qwerqwre: 0
      };
    },
    methods: {
			goRouter(route,index) {
				this.qwerqwre = index;  
				this.$router.push({path: route, query: {uid: "1111"}});
			}
    },
		components: {
			foot
		}
  }
</script>

<style scoped="scoped">
  body{
    margin: 0;
  }
	a{
		color: #fff !important;
		cursor: pointer;
	}
	.nav-link{
		color: #ccc !important;
	}
	.active{
		color: #fff !important;
	}
</style>
